<template>
  <div class="page-container">
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="course-detail-container">
      <el-tabs v-model="activeTab" type="border-card" class="course-tabs">
        <el-tab-pane label="课程内容" name="content">
          <div class="tab-content">
            <CourseInfoDisplay 
              :course-id="courseId" 
              @reload="handleReload"
            />
            
            <el-divider />
            
            <TaskList :course-id="courseId" />
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="课程评价" name="comments">
          <div class="tab-content">
            <CommentSection :course-id="courseId" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CourseInfoDisplay from '../components/CourseInfoDisplay.vue'
import TaskList from '../components/TaskList.vue'
import CommentSection from '../components/CommentSection.vue'

const route = useRoute()
const router = useRouter()
const activeTab = ref('content')

const courseId = computed(() => {
  return parseInt(route.params.id) || null
})

const handleReload = () => {
  // 触发子组件重新加载
  router.go(0)
}

onMounted(() => {
  // 验证课程ID
  if (!courseId.value) {
    router.push('/home')
  }
})
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.course-detail-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.course-tabs {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-tabs .el-tabs__content {
  padding: 0;
}

.tab-content {
  padding: 30px;
  min-height: 500px;
}

:deep(.el-tabs__header) {
  margin: 0;
  background: #f5f7fa;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  background: white;
  color: #409eff;
}
</style>